<template>
  <div>
    <div>retVal: {{ retVal }}</div>
    <div>retVal2: {{ retVal2 }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const retVal = ref()
const retVal2 = ref()
const p1 = Promise.resolve(1)
  .then(ret => {
    console.log(ret)
    return 'hello world'
  })
  .then(ret => {
    console.log(ret)
    retVal.value = ret
  })
const p2 = Promise.resolve(2)
  .then(ret => {
    console.log(ret)
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('你好')
      }, 2000)
    })
  })
  .then(ret => {
    console.log('ret', ret)
    retVal2.value = ret
  })
  .then(ret => {
    console.log('ret2', ret)
  })
  .then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('reject')
      }, 3000)
    })
  })
  .then(
    ret => {
      console.log('ret3', ret)
    },
    e => {
      /*
      这个reject回调执行之后，
      后面的`抓到了一个reject`以及catch回调都不会再被执行.
      所有所有then都没有reject回调，那才会执行catch回调
      */
      console.log('前一个then reject', e)
    }
  )
  .then(
    ret => {
      console.log('ret4', ret)
    },
    e => {
      console.log('抓到了一个reject', e)
    }
  )
  .catch(e => {
    console.log('PromiseDemo02 catch', e)
  })
  .finally(() => {
    console.log('PromiseDemo02 finally')
  })
</script>

<style scoped></style>
